<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <!-- 引入样式 -->
    <link href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" rel="stylesheet">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="../app/lib/ZohoCrmHelper.js" type="text/javascript"></script>
    <script src="../app/lib/ZSDK.js" type="text/javascript"></script>
    <script src="../app/lib/jquery-1.10.2.js" type="text/javascript"></script>
    <script src="../app/lib/ZohoEmbededAppSDK.min.js" type="text/javascript"></script>
    <script src="../app/lib/axios.min.js" type="text/javascript"></script>
    <title>测试页面</title>
</head>

<body>
<div id="app">

    <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" default-expand-all="true"></el-tree>


</div>


</body>
</html>


<script type="text/javascript">
    const app = new Vue({
        el: '#app',
        data() {
            return {
                crmId: "",


                data: [{
                    id: 1,
                    label: 'Sinotrans',
                    children: [
                        {
                            label: 'CN',
                            children:[
                                {id: 2, label: 'ANQING SINOTRANS'},
                                {id: 3, label: 'ARAMEX SINOTRANS EXPRESS CO.,LTD'},
                                {id: 3, label: 'BEIJING SINOTRANS TRUCKING CO,.LTD.'},
                                {id: 3, label: 'DALIAN SINOTRANS LOGISTICS CO LTD'},
                                {id: 3, label: 'GUANGDONG SINOTRANS CHEMICAL INTERNATIONAL'},
                                {id: 3, label: 'HEBEI SINOTRANS JIFA LOGISTICS CO.,LTD'},
                                {id: 3, label: 'NISSIN-SINOTRANS BEIJING BRANCH'},
                            ]
                        },
                        {
                            label: 'TB',
                            children:[
                                {id: 3, label: 'CHINA MARINE SHIPPING AGENCY SINOTRANS CONTAINER LINES'},

                            ]
                        },
                        {
                            label: 'ID',
                            children:[
                                {id: 3, label: 'PT SINOTRANS CSC INDONESIA'},
                                {id: 3, label: 'PT SINOTRANS CSC INDONESIA (SURABAYA BRACH)'},

                            ]
                        },
                        {
                            label: 'AU',
                            children:[
                                {id: 3, label: 'SINOTRANS (AUSTRALIA) PTY LTD'},

                            ]
                        },
                        {
                            label: 'BN',
                            children:[
                                {id: 3, label: 'SINOTRANS (B) SDN BHD'},

                            ]
                        },
                        {
                            label: 'HK',
                            children:[
                                {id: 3, label: 'SINOTRANS (HK) AIR TRANSPORTATION'},
                            ]
                        },
                    ]},
                    {
                        id: 1,
                        label: 'Kuehne',
                        children: [
                            {id: 3, label: 'BLUE ANCHOR LINE C/O KUEHNE + NAGEL'},
                            {id: 3, label: 'BRANCH OF KUEHNE  NAGEL CO., LTD IN HA NOI CITY'},
                            {id: 3, label: 'BRANCH OF KUEHNE NAGEL CO.,LTD IN HANOI CITY'},
                            {id: 3, label: 'COOLTAINER A DIVISION OF KUEHNE-NAGEL'},
                            {id: 3, label: 'ENERGIZER SA C/O KUEHNE + NAGEL'},
                            {id: 3, label: 'FFWD KUEHNE&NAGEL SRL'},
                            {id: 3, label: 'KUEHNE  & NAGEL INC - DET'},
                            {id: 3, label: 'Kuehne  Nagel'},
                            {id: 3, label: 'KUEHNE  NAGEL (PVT) LTD'},
                            {id: 3, label: 'KUEHNE  NAGEL (UK) LTD - JORDAN'},
                            {id: 3, label: 'KUEHNE  NAGEL AG'},
                            {id: 3, label: 'KUEHNE  NAGEL ANGOLA'},
                            {id: 3, label: 'KUEHNE  NAGEL AS'},
                            {id: 3, label: 'KUEHNE  NAGEL CO., LTD.'},
                            {id: 3, label: 'KUEHNE  NAGEL INC RIVER OAKS CENTER'},
                            {id: 3, label: 'KUEHNE  NAGEL INDIA'},
                            {id: 3, label: 'KUEHNE  NAGEL LIMITED'},
                            {id: 3, label: 'KUEHNE  NAGEL LTD.'},
                            {id: 3, label: 'KUEHNE  NAGEL LTEE'},
                            {id: 3, label: 'KUEHNE  NAGEL PTE LTD'},
                            {id: 3, label: 'KUEHNE  NAGEL PVT LIMITED'},
                            {id: 3, label: 'KUEHNE  NAGEL PVT LTD'},
                            {id: 3, label: 'KUEHNE  NAGEL S.A  DE C.V'},
                            {id: 3, label: 'KUEHNE  NAGEL S.A.'},
                            {id: 3, label: 'KUEHNE  NAGEL S.A. DE C.V.'},
                            {id: 3, label: 'KUEHNE  NAGEL SERV. LOGIST. LTDA'},
                            {id: 3, label: 'KUEHNE  NAGEL W.L.L.'},
                            {id: 3, label: 'KUEHNE &  NAGEL (PVT) LTD'},
                            {id: 3, label: 'KUEHNE &  NAGEL, INC.FMC 001162NF AGENT OF BLUE AN'},
                            {id: 3, label: 'KUEHNE & NAGAL PVT LTD'},
                            {id: 3, label: 'KUEHNE & NAGEL'},
                            {id: 3, label: 'Kuehne & Nagel'},
                            {id: 3, label: 'Kuehne & Nagel - NAC UY Uruguay'},
                            {id: 3, label: 'KUEHNE & NAGEL (A) MGNT- ALUAR FATE'},
                            {id: 3, label: 'KUEHNE & NAGEL (AP) MGNT COTO (ARBUE)'},
                            {id: 3, label: 'KUEHNE & NAGEL (ASIA PACIFIC) MANAGEMENT PTE LTD'},
                            {id: 3, label: 'KUEHNE & NAGEL (AUST) PTY LTD'},
                            {id: 3, label: 'KUEHNE & NAGEL (AUSTRALIA) PTY LTD'},
                            {id: 3, label: 'KUEHNE & NAGEL (NSW) PTY LTD'},
                            {id: 3, label: 'KUEHNE & NAGEL (NZ) LTD NAC FRUCOR SUNTORY NZ LTD'},
                            {id: 3, label: 'KUEHNE & NAGEL (SA) PTY LTD'},
                            {id: 3, label: 'KUEHNE & NAGEL (SAMREC)'},
                            {id: 3, label: 'KUEHNE & NAGEL / SEGAL'},
                            {id: 3, label: 'KUEHNE & NAGEL A.E.'},
                            {id: 3, label: 'KUEHNE & NAGEL ACE DEV(ROCKLAND MA)'},
                            {id: 3, label: 'KUEHNE & NAGEL AKTIENGESELLSCHAFT'},
                        ]
                    }
                ],
                defaultProps: {
                    children: 'children',
                    label: 'label'
                }
            };
        }
        ,
        mounted() {
            this.initData();
            ZOHO.embeddedApp.init();
        },
        methods: {
            handleNodeClick(data) {
                console.log(data.id);
                window.open('https://www.baidu.com/s?wd=' + data.id);
            },
            initData() {
                ZOHO.embeddedApp.on("PageLoad", function (data) {
                    this.crmId = data.EntityId;
                    app.callFunction();
                });
            },
            // 小部件调函数
            callFunction(){
                let func_name = "testPage";				// 函数名
                let req_data = {"id": this.crmId};// 参数
                ZOHO.CRM.FUNCTIONS.execute(func_name, req_data)
                    .then(function (data) {
                        console.log("data=" + JSON.stringify(data));
                        let countData = data.details.output;
                        console.log("countData=" + countData);
                    })
            }

        }
    });

</script>
<style>

</style>


